<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>会员频道</title>
    <link rel="stylesheet" href="__CSS__/public.min.css">
    <link rel="stylesheet" href="__JS__/vjs/video-js.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            overflow: auto !important;
        }

        li, a {
            list-style: none;
            text-decoration: none;
        }

        a:link, a:visited, a:hover, a:active {
            color: #000;
        }

        /*详情*/
        .list .item {
            width: 100%;
            text-align: center;
            border-bottom: 6px solid #eee;
            overflow: hidden;
            position: relative;
        }

        .list .item .vod {
            height: 13.2rem;
            background-size: cover;
            position: relative;
        }

        .vod .play-btn {
            width: 48px;
            height: 48px;
            top: 50%;
            left: 50%;
            margin-left: -1.47rem;
            margin-top: -1.47rem;
            z-index: 10;
            position: absolute;
            background: url(/public/static/img/h5/play.svg) no-repeat center;
            background-size: cover;
        }

        .vod .duration {
            background-color: rgba(0, 0, 0, .5);
            width: 43px;
            height: 18px;
            line-height: 18px;
            bottom: 8px;
            right: 8px;
            z-index: 10;
            position: absolute;
            border-radius: .6rem;
            color: #fff;
            font-size: 12px;
        }

        .item .title {
            height: 4.5rem;
            padding: 12px 15px 0 14px;
            font-size: 15px;
            color: #fff;
            text-align: left;
            position: relative;
            top: 0;
            left: 0;
            z-index: 10;
            background: url(/public/static/img/h5/bg_title.png) no-repeat center;
            background-size: cover;
        }

        .item p {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
            font-size: 13px;
            color: #666;
            margin: 0 20px;
        }

        .item p span {
            padding-left: 22px;
            background-repeat: no-repeat;
            background-size: contain;
        }

        .share {
            /*background-image: url(/public/static/img/h5/share.png);*/
            padding: 5px !important;
            background-color: #f5f7f9;
            color: #999;
            border-radius: 5px;
        }

        .look {
            background-image: url(/public/static/img/h5/look.png?5);
        }

        .zan {
            background-image: url(/public/static/img/h5/zan1.png);
        }

        .zan.active {
            background-image: url(/public/static/img/h5/zan2.png);
            color: #fd4d5e
        }

        /*播放器*/
        .vod-box {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            margin-top: 44px;
            width: 100%;
            z-index: 100;
        }

        .video-js {
            height: 13.2rem;
            width: 100%;
        }

        .video-js .vjs-big-play-button {
            display: none;
        }

        .video-js .vjs-error-display {
            display: none;
        }

        .video-js .vjs-progress-control:hover .vjs-progress-holder {
            font-size: 1em;
        }

        .video-js .vjs-fullscreen-control {
            display: none;
        }

        a, input, button {
            outline: none;
        }

        li.last {
            color: #999;
            text-align: center;
            padding: 5px 0 35px 0;
        }

        .dialog__bd:first-child {
            text-align: left;
        }

        .dialog__btn {
            font-size: 4vw !important;
        }

        .dialog__btn.dialog__btn_primary {
            color: rgba(22, 155, 213, 1);;
        }
    </style>
</head>
<body>
<ul class="list">
    <!--
    <li>
        <div class="item">
            <div class="vod" data-fid="5285890795130432454" data-url=""
                 style="background-image:url(http://1255625502.vod2.myqcloud.com/3b746de3vodcq1255625502/177ff0c95285890795130432454/5285890795130432455.jpg);">
                <div class="title">猜神奇宝贝叫声？除了皮卡丘可达鸭我都挺懵了</div>
                <span class="play-btn"></span>
                <span class="duration">07:13</span>
            </div>
            <p>
                <span class="share">分享</span>
                <span class="look">52310</span>
                <span class="zan">18019</span>
            </p>
        </div>
    </li>
    -->
</ul>

<!--隐藏的播放器-->
<div class="vod-box">
    <video id="vjs" class="video-js" poster="/public/static/img/1.png" controls data-setup="{}">
        <source src="/public/static/img/1.mp4" type="video/mp4"/>
    </video>
</div>
<script src="__JS__/jquery.min.js"></script>
<script src="__JS__/vjs/video.min.js"></script>
<script src="__JS__/common.js?v={$Think.config.commonJs}"></script>
<script>
    var $list = $('.list');
    var $vodBox = $(".vod-box");

    var page = 1;
    var type;
    var Player = videojs('vjs', {}, function onPlayerReady() {
        pd_look30m(this);
    });

    videojs.log.level('off');

    //加载数据
    load_data();

    var beforeScrollTop = 0, afterScrollTop = 0;
    var lock = true; //加载锁
    var lock_global = true; //全局锁

    $(window).scroll(function () {
        var scrollTop = $(window).scrollTop();
        var vodBoxTop = $vodBox.offset().top;
        var vodBoxHeight = $vodBox.height();

        //向上滚动边界
        if (scrollTop > (vodBoxTop + vodBoxHeight)) {
            Player.pause();
        }

        //向下滚动边界
        if (($(window).height() + scrollTop) < vodBoxTop) {
            Player.pause();
        }

        //滚动加载边界
        beforeScrollTop = $(window).scrollTop();
        if (beforeScrollTop > afterScrollTop) {
            if (!lock_global) {
                return;
            }

            var scrollRange = $(".list li").eq(-2).offset().top; //815.5625
            if (($(window).height() + scrollTop) > scrollRange) {
                if (lock) {
                    lock = false;
                    page++;
                    load_data_scroll();
                }
            }
        }

        afterScrollTop = beforeScrollTop;
    });

    var first = false;
    var current_vid;

    //点击播放按钮播放视频
    $list.on('click', '.play-btn', function () {
        //视频播放统计
        if (first && current_vid) {
            video_stats(current_vid);
        }

        current_vid = $(this).parent().data('fid');
        first = true;

        //加载视频
        var url = $(this).parent().data('url');
        Player.src(url);
        Player.load(url);
        Player.play();

        //播放器定位
        var top = $(this).parent().parent().position().top;
        $vodBox.css('top', parseInt(top) - 44).show();
    });

    //微信分享
    $list.on('click', '.share', function () {
        var data = {
            'url': location.origin + "/h5_index",
            'img': 'https://www.baidu.com/img/bd_logo1.png?qua=high',
            'title': '标题',
            'content': '1212121'
        };
        var json = JSON.stringify(data);
        window.android._app_share(json);
    });

    //视频点赞
    $list.on('click', '.zan', function () {
        var span = $(this);
        if (span.hasClass('active')) {
            span.removeClass('active');
            type = -1;

        } else {
            span.addClass('active');
            type = 1;
        }

        var sum = span.html();
        span.html(parseInt(sum) + type);

        $.ajax({
            url: '/vod_zan?' + Math.random(),
            type: "GET",
            dataType: "json",
            data: {fid: $(this).parent().siblings('.vod').data('fid'), type: type},
            success: function (res) {
            }
        });
    });

    function load_data() {
        $.ajax({
            url: '/get_vip_video?' + Math.random(),
            type: "GET",
            dataType: "json",
            data: {page: page},
            success: function (res) {
                $list.html(html_str(res));
            }
        });
    }

    function load_data_scroll() {
        $.ajax({
            url: '/get_vip_video?' + Math.random(),
            type: "GET",
            dataType: "json",
            data: {page: page},
            success: function (res) {
                if (res.data.length == 0) {
                    $list.append('<li class="last">已经见底</li>');
                    lock_global = false;
                } else {
                    $list.append(html_str(res));
                    lock = true;
                }
            }
        });
    }

    function html_str(res) {
        var html = '';
        for (var i = 0; i < res.data.length; i++) {
            var duration = s_to_hs(res.data[i]['duration']);
            var cid = res.data[i]['cid'];

            html += '<li><div class="item">';

            //长按的时候将图片改为背景图(img会弹微信的菜单)
            html += '<div class="vod" data-fid="' + res.data[i]['fileId'] + '" data-url="' + res.data[i]['fileUrl'] + '" style="background-image:url(' + res.data[i]['pic'] + ');">';
            html += '<div class="title">' + res.data[i]['fileName'] + '</div>';
            html += '<span class="play-btn"></span>';
            html += '<span class="duration">' + duration + '</span></div>';
            html += '<p data-fid=' + res.data[i]['fileId'] + '>';
            html += '<span class="share">会员频道</span>';
            html += '<span class="look">' + res.data[i]['play'] + '</span>';
            html += '<span class="zan">' + res.data[i]['love'] + '</span>';
            html += '</p></div></li>';
        }

        return html;
    }

    //时间转换
    function s_to_hs(s) {
        var h;
        h = Math.floor(s / 60);
        s = s % 60;
        h += '';
        s += '';
        h = (h.length == 1) ? '0' + h : h;
        s = (s.length == 1) ? '0' + s : s;
        return h + ':' + s;
    }

    //视频统计
    function video_stats(current_vid) {
        console.log("视频统计");
        $.ajax({
            url: '/video_stats_index',
            type: "POST",
            dataType: "json",
            xhrFields: {withCredentials: true},
            data: {
                'currentTime': Player.currentTime(),
                'current_vid': current_vid,
                'type': "inline",
                'channel': 11,
                'exp': (Player.currentTime() / Player.duration() > 0.7) ? 1 : 0
            },
            success: function (res) {
                console.log(res);
            }
        });
    }

    if (!Cookies.get('open_qq')) {
        Cookies.set('open_qq', 1, {expires: 15});

        var $dialog = utils.dialog({
            content: "尊敬的VIP用户，请加入我们的VIP福利群！更多福利在向您招手!!!",
            buttons: [{
                label: '加入QQ家族群',
                type: 'primary',
                onClick: function () {
                    window.android._open_url('TmYjhwirs089gTEq20RMN5CgXxBoBPnl');
                }
            }, {
                label: '下次再加入',
                type: 'default',
                onClick: function () {
                    $dialog.hide();
                }
            }]
        });
    }
</script>
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?7741d4cbd941d985eb296c908ef40bf2";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</body>
</html>